<template>
    <div>
        
        <el-card class="box-card">
            <div slot="header">
                <h1 style="text-align:center">蚂蚁金融管理系统</h1>
            </div>
            <el-form :rules="rules" ref="ruleForm" :model="ruleForm">
                <el-form-item label="用户名:" label-width="80px" prop="username"> 
                    <el-input v-model.trim="ruleForm.username" placeholder="请输入4-8位字母或数字"></el-input>
                </el-form-item>
                <el-form-item label="密码:" label-width="80px" prop="password">
                    <el-input type="password" v-model.trim="ruleForm.password" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item label-width="80px">
                    <el-button type="primary" style="width:100%" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import {post} from '@/utils/http'
import {setToken} from '@/utils/auth'
    export default {
        data(){
            // 用户名的校验规则
            var regName = /^(\w|\d){4,8}$/;
            var checkName =  (rule, value,callback) => {
                if(!value){
                    callback(new Error('用户名不能为空'));
                }else{
                    if(!regName.test(value)){
                        callback(new Error('请输入4-8位字母或数字'))
                    }else{
                        callback()
                    }
                }
            };
            // 密码的校验规则
            var regPass = /^\d{6}$/;
            var checkPass = (rule,value,callback)=>{
                if(!value){
                    callback(new Error('密码不能为空'))
                }else{
                    if(!regPass.test(value)){
                        callback(new Error('请输入6位数字密码'))
                    }else{
                        callback()
                    }
                }
            }
            return {
                // 定义form表单的验证规则
                rules:{
                    username:[{required:true,validator:checkName,trigger:'blur'}],
                    password:[{required:true,validator:checkPass,trigger:'blur'}]
                },
                // 表单中双向绑定数据
                ruleForm:{
                    username:'',
                    password:''
                }

            }
        },
        methods:{
            login(){
                this.$refs.ruleForm.validate((valid)=>{
                    if (valid) {
                        // alert('登陆成功了!');
                        post("/login",this.ruleForm)
                        .then((res)=>{
                            setToken(res.token)
                            this.$router.push('/')
                            sessionStorage.setItem("nickname",res.nickname)
                        }).catch((error)=>{
                            console.log(error)
                        })
                        // catch捕捉未知错误
                    } 
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.box-card {
    width: 480px;
    margin: 200px auto;
  }
</style>